<template>
	<el-card shadow="never" header="个人信息">
		<el-form ref="form" :model="form" label-width="80px" style="width: 460px;margin-top:20px;">
			<el-form-item label="账号">
				<el-input v-model="form.username" disabled></el-input>
				<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
			</el-form-item>
			<el-form-item label="昵称">
				<el-input v-model="form.nickName"></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-select v-model="form.sex" placeholder="请选择">
					<el-option label="男" value="man"></el-option>
					<el-option label="女" value="woman"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="生日" prop="birth">
				<el-date-picker v-model="form.birth" type="date" value-format="YYYY-MM-DD" placeholder="选择生日"></el-date-picker>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
				<el-input v-model="form.email" placeholder="请输入邮箱" clearable></el-input>
			</el-form-item>
			<el-form-item label="手机号码" prop="mobile">
				<el-input v-model="form.mobile" placeholder="请输入手机号码" clearable></el-input>
			</el-form-item>
			<el-form-item label="个性签名">
				<el-input v-model="form.about" type="textarea"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="userInfoSubmit()">保存</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
export default {
	name: "account",
	props:['userForm'],
	data(){
		return{
			form:{}
		}
	},
	methods:{
		async userInfoSubmit(){
			var params= {
				id:this.form.id,
				nickName:this.form.nickName,
				sex:this.form.sex,
				about:this.form.about,
				birth:this.form.birth,
				email:this.form.email,
				mobile:this.form.mobile
			}
			var res = await this.$API.system.user.userCenterEdit.post(params);
			if(res.success){
				this.$message.success("保存成功！")
				//清除缓存 重新加载
				var userInfo = await this.$API.auth.getUserInfo.get({username:this.form.username})
				if(userInfo.success){
					this.$TOOL.data.remove("USER_INFO")
					this.$TOOL.data.set("USER_INFO",userInfo.data)
				}
			}
		},
	},
	mounted() {
		this.form = this.userForm
	}
}
</script>

<style scoped>

</style>
